<template>
  <div id="PM25">
    <VeLiquidfill :data="liquidfillData"
                  :settings="chartSettings"
                  height="300px"
                  opacity="0.5"></VeLiquidfill>
    <VeBar :data="barData"
          height="300px"></VeBar>
  </div>
</template>

<script>
  import VeLiquidfill from 'v-charts/lib/liquidfill.common'
  import VeBar from 'v-charts/lib/bar.common'
  import api from '../api/index'

  export default {
    name: "PM25",
    components: {VeLiquidfill, VeBar},
    data() {

      return {
        liquidfillData: {
          columns: ['city', 'percent'],
          rows: [{
            city: '教室',
            percent: 0.67
          }],
          height: "200px",
        },
        barData: {
          columns: ['直径', '个数', '重量'],
          rows: [
            {'直径': 'pm1', '个数': 3000, '重量': 300 },
            {'直径': 'pm2.5', '个数': 1000, '重量': 100},
            {'直径': 'pm10', '个数': 2000, '重量': 200 },
          ]
        }
      }
    },
    mounted() {
      this.getPM25();
    },
    created: function() {
      this.chartSettings = {
        seriesMap: {
          '上海': {
            shape: 'rect'
          }
        }
      }
    },
    methods: {
      getPM25(){
        api.getPM25({
          params:{}
        }).then((response)=>{
          console.log(res)
          // this.data
        }).catch((error)=>{
          console.error(error)
        })
      },
    },

  }
</script>

<style scoped>
  .ve-liquidfill{
    /*top: 10%;*/
  }
</style>